<template>
  <!--新建弹框-->
  <div class="new">
    <el-dialog title="新建&编辑主播" :visible.sync="isEdit" :before-close="cancel" width="40%">
      <el-form ref="hostValidate" :model="newForm" :rules="ruleValidate" label-width="130px">
        <el-form-item label="主播真实姓名" prop="realname">
          <el-input v-model.trim="newForm.realname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" prop="idCard">
          <el-input v-model.trim="newForm.idCard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证照片" prop="photo1">
          <transition name="opacity" class="opacity">
<!--            @on-transport-file-list="handleTransportFileList"-->
            <upload
              @handleRemove="handleRemove1"
              :file-list="formValidate.avatar ? formValidate.avatar.split(';') : []"
              @handleSuccess="handleSuccess1"
              :max-size="5120"
              :limit="1"
              v-if="isFinished"
            >
            </upload>
          </transition>
        </el-form-item>
        <el-form-item prop="photo2">
          <transition name="opacity" class="opacity">
<!--            @on-transport-file-list="handleTransportFileList"-->
            <upload
              @handleRemove="handleRemove2"
              :file-list="formValidate.avatar ? formValidate.avatar.split(';') : []"
              @handleSuccess="handleSuccess2"
              :max-size="5120"
              :limit="1"
              v-if="isFinished"
            >
            </upload>
          </transition>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Upload from '@/framework/components/upload'
import {update,save} from '@/project/service/anchor'

export default {
  name:'new',
  props: {
    rowData:{
      type: Object,
      default: () => {
        return {}
      }
    },
    isEdit:{
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  components: { Upload },
  data() {
    const photo1Validator = (rule, value, callback) => {
      if (!this.photo1Validate) {
        callback(new Error('请上传身份证照片'))
      } else {
        callback()
      }
    }
    const photo2Validator = (rule, value, callback) => {
      if (!this.photo2Validate) {
        callback(new Error('请上传身份证照片'))
      } else {
        callback()
      }
    }
    const idValidator = (rule, value, callback) => {
      let reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('身份证号码不合法'))
      }
    }
    return {
      //表单校验规则
      ruleValidate: {
        realname: [{required: true, message: '不能为空', trigger: 'blur'}],
        idCard: [{required: true, message: '不能为空', trigger: 'blur'},{validator: idValidator, trigger: 'blur'}],
        photo1: [{ required: true, validator: photo1Validator, trigger: 'blur'}],
        photo2: [{ required: true, validator: photo2Validator, trigger: 'blur'}],
      },
      newForm:{id:''},//编辑对话框中的表单
      photo1Validate: false,//是否上传了图片1
      photo2Validate: false,//是否上传了图片2
      formValidate:{},
      id:'',
      frontIdCardImage:'',//身份证前照
      backIdCardImage:'',//身份证背照
      isFinished:false
    }
  },
  watch:{
    isEdit(val){
      if(val){
        console.log(this.rowData)
        if(this.rowData){ //编辑
          console.log('编辑')
          this.newForm = this.rowData
          this.newForm.id = this.newForm.id.toString()
        }else{
          console.log('上传')
        }
        console.log(this.newForm)
        this.isFinished = true
      }
    }
  },
  methods: {
    //删除图片触发
    handleRemove1(type){
      this.photo1Validate = false
      this.frontIdCardImage = ''
    },
    //上传成功时触发
    handleSuccess1(res){
      this.photo1Validate = true
      this.frontIdCardImage = res.Location
    },
    //删除图片触发
    handleRemove2(){
      this.photo2Validate = false
      this.backIdCardImage = ''
    },
    //上传成功时触发
    handleSuccess2(res){
      this.photo2Validate = true
      this.backIdCardImage = res.Location
    },
    //提交审核
    submit(){
      this.$nextTick(() => {
        this.$refs['hostValidate'].validate(valid => {
          if(valid){
            console.log(this.id)
            let param = { anchor:this.newForm }
            param.anchor.frontIdCardImage = this.frontIdCardImage
            param.anchor.backIdCardImage = this.backIdCardImage
            console.log(param)
            if(this.rowData){ //修改
              console.log("编辑")
              console.log(param)
              update(param,data => {
                console.log(data)
                this.$message.success('编辑成功')
                this.cancel()
              })
            }else{ //新建
              delete param.anchor.id
              save(param, data => {
                console.log(data)
                this.$message.success('新建成功')
                this.cancel('',true)
              })
            }
          }
        })
      })
    },
    //取消
    cancel(pointerEvent,isUpdate=false){
      // this.$refs.hostValidate.resetFields()
      this.newForm = {}
      this.photo1Validate = false
      this.photo2Validate = false
      this.isFinished = false
      this.$emit('close',isUpdate);
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-upload--picture-card {
  width: 200px !important;
  height: 100px;
  line-height: 106px;
  margin-top: 10px !important;
}

/deep/ .upload .el-upload-list__item {
  width: 200px;
  display: block;
  margin: 20px 0 0 0;
}
</style>
